<template>
  <div class="add-invoice">
    <Form class="form"
      :model="formData"
      :rules="formRules"
      ref="form"
      label-position="right"
      label-width="120px">
			<form-item label="抬头类型：" required prop="type">
        <div class="input">
          <m-radio v-model="formData.type" :label="0">单位</m-radio>
          <m-radio v-model="formData.type" :label="1">个人</m-radio>
        </div>
			</form-item>
      <form-item label="名称：" prop="consignee">
        <div class="input">
          <m-input v-model="formData.consignee" placeholder="请输入名称" />
        </div>
     </form-item>
     <form-item label="税号：" prop="tax_code">
        <div class="input">
          <m-input v-model="formData.tax_code" placeholder="请输入税号" />
        </div>
      </form-item>
      <form-item label="开户银行：" prop="bank">
        <div class="input">
          <m-input v-model="formData.bank" placeholder="请输入开户银行" />
        </div>
     </form-item>
     <form-item label="银行账号：" prop="card_id">
        <div class="input">
          <m-input v-model="formData.card_id" placeholder="请输入银行账号" clearable />
        </div>
     </form-item>
     <form-item label="单位地址：" prop="company_address">
        <div class="input">
          <m-input v-model="formData.company_address" placeholder="请输入单位地址" />
        </div>
      </form-item>
      <form-item label="电话：" prop="tel">
        <div class="input">
          <m-input v-model="formData.tel" placeholder="请输入电话号码" />
        </div>
      </form-item>
			<form-item>
        <div class="input">
          <m-checkbox v-model="formData.is_default">设为默认</m-checkbox>
        </div>
			</form-item>
       <m-button width="240" class="cenBtn" @click="submit">{{ type=='add' ? '添加' : '修改' }}</m-button>
		</Form>

  </div>
</template>

<script>
import MButton from '@/components/common/m-button/MButton'
import MInput from '@/components/common/m-input/MInput'
import MSelect from '@/components/common/m-select/MSelect'
import MRadio from '@/components/common/m-radio/MRadio'
import MCheckbox from '@/components/common/m-checkbox/MCheckbox'
import { Form,Radio, FormItem } from 'element-ui'
import { addInvoice, detailInvoice, updateInvoice } from '@/request/api'

export default {
  name: 'AddInvoice',
  components: { MCheckbox, MRadio, MSelect, MInput, MButton, Radio,Form,FormItem },
  data() {
    return {
      id:'',
      type:'add',
        formData: {
          type: 0
        },
      formRules: {
        consignee: [{required: true,message: '请输入名称',trigger: 'blur'}],
        tax_code: [{ required: true, message: '请输入正确15，17，18，20位企业税号！'}],
        bank: [{required: true,message: '请输入开户银行',trigger: 'blur'}],
        card_id: [{required: true,message: '请输入银行账号',trigger: 'blur'}],
        company_address: [{required: true,message: '请输入单位地址',trigger: 'blur'}],
        tel: [{required: true,message: '请输入电话'},{ type: 'number',
          message: '手机号格式不正确',
          trigger: 'blur',
          transform (value) {
            const phonereg = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/
            if (!phonereg.test(value)) {
              return false
            }else{
              return Number(value)
            }
          }
        }]
      }
    }
  },
  created() {
  	this.id = this.$route.query.id
		if(this.id){
			this.type='edit'
			this.getInfo()
		}
  },
	methods:{
		async getInfo(){
			const res = await detailInvoice(this.id);
      try {
        res.data.is_default = Boolean(res.data.is_default)
        this.formData = res.data
      }catch(err) {
      this.$message.error(err.message)
      }
		},
		submit(){
			let that = this
			this.$refs.form.validate(res => {
				if(res){
					that.$toastVant.loading('请稍后...')
					if(that.type=='add'){
            this.formData.card_id = this.formData.card_id.replace(/\s*/g,"")
						addInvoice(that.formData).then(res => {
							 setTimeout(function(){
								that.$message.success(res.message)
								that.$router.go(-1)
							 },500)
						}).catch(err => {
              this.$message.error(err.message)
            })
					}else if(that.type=='edit'){
            this.formData.card_id = this.formData.card_id.replace(/\s*/g,"")
						updateInvoice(that.formData).then(res => {
							 setTimeout(function(){
								that.$message.success(res.message)
								that.$router.go(-1)
							 },500)
						}).catch(err => {
              this.$message.error(err.message)
            })
					}		
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";
.title>span{
  color: rgb(228, 139, 44);
  position: relative;
  top: 4px;
  margin-right: 4px;
}
.cenBtn{
  width: 240px;
  display: block;
  margin: 0 auto;
}
.add-invoice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-bottom: 400px;

  .form {
    width: 60%;
    margin: 40px 0;

    .form-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;

      .title {
        width: 25%;
        display: flex;
        justify-content: flex-end;
      }

      .input {
        width: 70%;
      }
    }
  }
}
</style>
